<template>
	<view class="login">
		<view class="login-box">
			<image class="logo" src="https://img.qiananquang.com/minapp//logo.png" mode=""></image>
			<view class="login-box-title">
				<text class="slogan">Hi，手机号码换绑</text>
				<text class="slogan2">手机号码非常用号，请修改手机号码</text>
			</view>
			<view class="steps">
				<uv-steps :current="current" activeColor="#FD3523" inactiveColor="#E2E2E2">
					<uv-steps-item title="原手机号验证"></uv-steps-item>
					<uv-steps-item title="关联新手机号"></uv-steps-item>
				</uv-steps>
			</view>
			<view class="login-userinfo">
				<template v-if="current == 0">
					<view class="login-nickname">
						<view style="display: flex;align-items: self-end;"><text>原手机号码</text><text
								style="font-size: 26rpx;font-weight: 500;"></text></view>
						<view class="login-input">
							<uv-input @blur="oldBlur" type="number" v-model="oldphone.num" :placeholder="'输入原手机码'+userinfo.anonphone"
								border="none" :fontSize="'30rpx'" :customStyle="{
								'height': '90rpx',
								'lineHeight': '90rpx',
								'fontSize': '30rpx',
								'fontWeight': '700'
							}">
								<template v-slot:suffix>
									<uv-code ref="olduCode" @change="codeChange" seconds="60"
										changeText="X秒重新获取"></uv-code>
									<uv-button @click="getCode" :plain="true" shape="circle" :text="tips"
										color="#FC3D2C" size="mini"></uv-button>
								</template>
							</uv-input>
						</view>
					</view>
					<view class="login-nickname">
						<text>短信验证码 </text>
						<view class="login-input">
							<uv-input type="number" border="none" :fontSize="'30rpx'" :customStyle="{
								'height': '90rpx',
								'lineHeight': '90rpx',
								'fontSize': '30rpx',
								'fontWeight': '700'
							}" v-model="oldphone.code" placeholder="请输入6位短信验证码">
							</uv-input>
						</view>
					</view>
				</template>
				<template v-if="current == 1">
					<view class="login-nickname">
						<text>新手机号码 </text>
						<view class="login-input">
							<uv-input type="number" border="none" :fontSize="'30rpx'" :customStyle="{
								'height': '90rpx',
								'lineHeight': '90rpx',
								'fontSize': '30rpx',
								'fontWeight': '700'
							}" v-model="newphone.num" placeholder="请输入新手机号码">
								<template v-slot:suffix>
									<uv-code ref="newuCode" @change="codeChange" seconds="20"
										:changeText="second+'秒重新获取'"></uv-code>
									<uv-button @click="getCode" :plain="true" shape="circle" :text="tips"
										color="#FC3D2C" size="mini"></uv-button>
								</template>
							</uv-input>
						</view>
					</view>
					<view class="login-nickname">
						<text>短信验证码 </text>
						<view class="login-input">
							<uv-input type="number" border="none" :fontSize="'30rpx'" :customStyle="{
								'height': '90rpx',
								'lineHeight': '90rpx',
								'fontSize': '30rpx',
								'fontWeight': '700'
							}" v-model="newphone.code" placeholder="请输入6位短信验证码">
							</uv-input>
						</view>
					</view>
				</template>
				<uv-button :disabled="old_disabled" :customStyle="{'marginTop':'50rpx'}" @click="downSteps"
					color="linear-gradient(180deg, #FC3826, #F49D95)"
					shape="circle">{{current == 1 ? '完成' :'下一步'}}</uv-button>
				<uv-button :customStyle="{'marginTop':'20rpx'}" v-if="current != 0" @click="upSteps"
					color="linear-gradient(#b3b3b3, #d3d5d3)" shape="circle">上一步</uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWxPhone,
		getPhoneCode,
		getDetail,
		putChangePhone,
		postVerifyPhone
	} from '@/http/user.js'


	export default {
		name: "loginPopup",
		data() {
			return {
				userinfo: {
					avatar: '',
					nickname: ' ',
					gender: null,
					phone: '',
					gender: ''
				},
				tips: '获取验证码',
				checkboxValue: false,
				current: 0,
				old_disabled:false,
				oldphone: {
					num: '',
					code: ''
				},
				newphone: {
					num: '',
					code: ''
				},
				second: 60,
				rules: {

				}
			};
		},
		onShow() {
			this.loadData()
		},
		methods: {
			loadData() {
				getDetail().then(res => {
					this.userinfo = {
						...res.data,
						anonphone: res.data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
					}
				})
			},
			oldBlur(val){
				// if(val === this.userinfo.phone)
				// this.old_disabled = false
			},
			upSteps() {
				this.current = this.current - 1
			},
			downSteps() {
				if (this.current == 1) {
					if(!uni.$uv.test.mobile(this.newphone.num)){
						return uni.showToast({
							title:'请输入正确手机号',
							icon:'error'
						})
					}
					let params = {
						newPhone:this.newphone.num,
						authCode:this.newphone.code
					}
					putChangePhone(params).then(res=>{
						uni.showModal({
							title: '更换手机号成功',
							content: `手机号已更换为${this.newphone.num}`,
							showCancel: false,
							confirmText: '我已知晓',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
								} else if (res.cancel) {
									console.log('用户点击取消');
									uni.navigateTo({
										url: '/pages/login/phone'
									})
								}
							}
						})
					})
				}else{
					if(!uni.$uv.test.mobile(this.oldphone.num)){
						return uni.showToast({
							title:'请输入正确手机号',
							icon:'error'
						})
					}
					let params = {
						phone:this.oldphone.num,
						authCode:this.oldphone.code
					}
					postVerifyPhone(params).then(res=>{
						uni.showToast({
							title:'手机号验证成功',
							icon:'success'
						})
						this.$refs.olduCode.reset() //重置旧手机倒计时
						this.current = this.current + 1
					})
					
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.current == 0){
					if(this.oldphone.num === this.userinfo.phone){
						if (this.$refs.olduCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							let params = {
								phone: this.oldphone.num
							}
							getPhoneCode(params).then(res => {
								// this.old_disabled = false
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.olduCode.start();
							})
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}else{
						return uni.showToast({
							title:'手机号不匹配',
							icon:'error'
						})
					}
				}else{
					if(!uni.$uv.test.mobile(this.newphone.num)){
						return uni.showToast({
							title:'请输入正确手机号',
							icon:'error'
						})
					}else{
						if (this.$refs.newuCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							let params = {
								phone: this.newphone.num
							}
							getPhoneCode(params).then(res => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.newuCode.start();
							})
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}
				}
				
				
			},
			onChooseAvatar(val) {
				this.userinfo.avatar = val.detail.avatarUrl
			},
			nickBlur(val) {
				console.log(val.detail.value, 0, val);
				this.userinfo.nickname = val.detail.value
			},
			getrealtimephonenumber(val) {
				console.log(val);
			},
			login(val) {
				if (this.checkboxValue.length == 0) {
					return uni.showToast({
						title: '请点击阅读协议',
						icon: 'none',
					})
				}
				uni.clearStorageSync()
				let paramsPhone = {
					code: val.detail.code,
					encryptedData: val.detail.encryptedData,
					iv: val.detail.iv
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						this.wxCode = loginRes.code
						let params = {
							code: this.wxCode
						}
						getWxLogin(params).then(res => {
							uni.setStorageSync('token', res.data.token)
							this.userinfo.phone = res.data.phone
							paramsPhone.sessionKey = res.data.sessionKey
							getWxPhone(paramsPhone).then(e => {
								uni.setStorageSync('userinfo', this.userinfo)
							})
						})
					}
				});
				uni.getUserInfo({
					provider: 'weixin',
					success: (infoRes) => {
						console.log(infoRes.userInfo);
						this.userinfo.avatar = infoRes.userInfo.avatarUrl
						this.userinfo.nickname = infoRes.userInfo.nickName
						this.userinfo.gender = infoRes.userInfo.gender
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(180deg, #FFDDDA, rgba(237, 237, 237, 0));
		background-size: 100% 345rpx;
		background-repeat: no-repeat;
		background-color: #F7F6F9;
	}

	.login {
		background: url('https://img.qiananquang.com/minapp/loginbg.png') no-repeat top left / 100% 310rpx;
	}

	.login-box {

		border-radius: 30rpx 30rpx 0rpx 0rpx;

		padding: 40rpx 70rpx 120rpx 70rpx;

		.logo {
			width: 135rpx;
			height: 135rpx;
			// background: #FB4939;
		}

		.login-box-title {
			// text-align: center;
			margin-top: 50rpx;

			text {
				display: block;
			}

			.slogan {
				font-weight: 700;
				font-size: 46rpx;
				color: #2C2821;
				margin-bottom: 10rpx;
			}

			.slogan2 {
				font-weight: 500;
				font-size: 24rpx;
				color: #CCCBCB;
				margin-top: 15rpx;
			}
		}

		.login-userinfo {
			margin-top: 40rpx;

			.avatar {
				background: linear-gradient(180deg, #fc3826FF, #f49d95FF);
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.iconfont {
				color: #fff;
				font-size: 80rpx;
			}

			.login-nickname {
				margin-top: 50rpx;
				// width: 450rpx;
				margin-bottom: 30rpx;

				text {
					font-weight: 700;
					font-size: 30rpx;
					color: #2F3133;
					display: block;
					margin-bottom: 30rpx;
				}

				.login-input {
					margin: 10rpx 0;
					// padding: 10rpx 0;
					border-bottom: 4rpx solid #e7e7e7;
				}

				input {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					font-weight: 700;
				}
			}
		}

		.login-btn {
			margin-top: 80rpx;

			button {
				width: 520rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50rpx;
				font-weight: 700;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-bottom: 30rpx;
			}

			.wxlogin {
				background: linear-gradient(180deg, #FC3826, #F49D95);
			}

			.phonelogin {}
		}
	}

	.login-tips {
		font-weight: 600;
		font-size: 24rpx;
		color: #A5A5A5;
		text-align: center;
		margin-top: 60rpx;
	}

	.agreement-box {
		font-weight: 600;
		font-size: 24rpx;
		color: #A5A5A5;
		text-align: center;
		margin-top: 60rpx;

		.agreement-txt {
			display: flex;
		}

		.agreement {
			color: #FD3523FF;
		}
	}

	.steps {
		margin-top: 50rpx;
	}
</style>